.root {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 7.5rem;
    height: 100%;
    background: #fff;
    .controls {
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        flex: none;
        width: 100%;
        max-width: 7.5rem;
        border-bottom: 1px solid #eee;
        user-select: none;
        .controlButton {
            display: inline-block;
            cursor: pointer;
        }
        .basicControl {
            height: 100%;
            display: flex;
            padding-left: .2rem;
            .controlButtonContainer {
                height: 100%;
                padding: 0 .16rem;
                display: flex;
                align-items: center;
            }
            .controlButton {
                width: .54rem;
                height: .54rem;
                border-radius: .1rem;
                span {
                    display: block;
                    width: .54rem;
                    height: .54rem;
                    background: url(https://cdn.weipaitang.com/static/20170904e44670dc-6c40-465a-b80d-3f45b318542a-W162H108) no-repeat center / 1.62rem 1.08rem;
                }
                .BOLD {
                    background-position: 0 0;
                }
                .ITALIC {
                    background-position: -0.54rem 0;
                }
                .UNDERLINE {
                    background-position: -1.08rem 0;
                }
                &.active {
                    background: #57a7ff;
                    .BOLD {
                        background-position: 0 -0.54rem;
                    }
                    .ITALIC {
                        background-position: -0.54rem -0.54rem;
                    }
                    .UNDERLINE {
                        background-position: -1.08rem -0.54rem;
                    }
                }
            }
        }
        .tools {
            display: flex;
            padding-right: .2rem;
            .font, .link, .color {
                display: block;
                padding: .2rem;
                width: .4rem;
                height: .4rem;
                background: url(https://cdn.weipaitang.com/static/2017090417f658f5-e16b-4d1a-8ed3-161d898a1c72-W200H40) no-repeat center / 2rem .4rem;
                background-origin: content-box;
                background-clip: content-box;
            }
            .font {
                background-position: 0 0;
            }
            .link {
                background-position: -0.4rem 0;
            }
            .color {
                background-position: -1.6rem 0;
            }
        }
        .fontControl {
            .controlButton {
                width: .4rem;
                height: .4rem;
                background: #eee;
            }
        }
    }
    .editor {
        height: 100%;
        padding: 1.2rem 0 .15rem 0;
        /* 默认文本样式 */
        font-size: 16px;
        line-height: 1.5;
        border-bottom: 1px solid #eee;
        overflow-y: scroll;
        -webkit-overflow-scrolling: auto;
        user-select: text;
        .inner {
            display: inline-block;
            width: 100%;
            // height: 100%;
            padding: 0 .3rem;
            box-sizing: border-box;
            // 全局font-style会影响继承的italic
            * {
                font-style: inherit;
            }
        }
        a {
            pointer-events: none;
        }
    }
    .linkContainer {
        width: 5.6rem;
        border-radius: .1rem;
        background: #fff;
        .title {
            text-align: center;
            font-size: .36rem;
            padding: .3rem 0;
            font-weight: normal;
        }
        .input {
            width: 100%;
            padding: 0 .3rem .2rem;
            border-radius: .1rem;
            box-sizing: border-box;
            input {
                background: #f2f2f2;
                width: 100%;
                height: .75rem;
                padding: .15rem .2rem;
                box-sizing: border-box;
                border: none;
                border-radius: .1rem;
                line-height: .45rem;
                font-size: .32rem;
                transition: background .3s ease;
                &:focus {
                    background: #f6f6f6;
                }
                &::-webkit-input-placeholder {
                    color: #c8c8c8;
                    font-weight: 300;
                    line-height: .45rem;
                }
            }
        }
        .actions {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: .9rem;
            font-size: .34rem;
            &::before {
                position: absolute;
                left: 0;
                top: 0;
                content: '';
                display: block;
                width: 100%;
                border-bottom: 1px solid #eee;
                transform: scaleY(.5);
            }
            .cancel, .confirm {
                position: relative;
                width: 50%;
                height: 100%;
                line-height: .9rem;
                text-align: center;
            }
            .cancel {
                &::after {
                    position: absolute;
                    right: 0;
                    top: 0;
                    content: '';
                    display: block;
                    height: 100%;
                    border-right: 1px solid #eee;
                    transform: scaleX(.5);
                }
            }
            .confirm {
                color: #06BC07;
            }
        }
    }
}